<template>

	<view class="input" type="text" placeholder="请选择地区">
		<picker range-key="name" class="pickerList" mode="multiSelector" :range="newProvinceDataList"
			:value="multiIndex" @change="pickerChange" @columnchange="pickerColumnchange">
			<view style="color: #808080;font-size: 16px;">{{select}}</view>
		</picker>
	</view>

</template>


<script>
	/**
	 * 此为网上控件的改良，非个人从0开始编写，侵删 联系微信: alvin198761
	 * @author alvin
	 * @description 省市区选择器 
	 */
	export default {
		name: "alvin-area-picker",
		model: {
			prop: 'value',
			event: 'input'
		},

		props: {
			value: {
				type: Array,
				default: []
			},
			options: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				newProvinceDataList: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				select: '选择省市区',

				addressData: {
					name: '',
					phone: '',
					address: ''
				},
				binhao: '1'
			}
		},
		created() {
			this.restore(this.value);

		},
		watch: {
			value(newValue, oldValue) {
				if (newValue && newValue.length === 3) {
					if (typeof(newValue[0]) === 'object') {
						this.restore(newValue.map(item => item.code))
					} else {
						this.restore(newValue)
					}
				} else {
					this.select = '选择省市区';
					this.pickerColumnchange({
						detail: {
							column: 0,
							value: 0
						}
					})
				}
			}
		},
		methods: {
			restore(value) {
				this.newProvinceDataList = [[],
					[],
					[]]
				if (!value || value.length === 0) {
					for (let i = 0; i < this.options.length; i++) {
						this.newProvinceDataList[0].push(this.options[i]);
					}
					for (let i = 0; i < this.options[0].children.length; i++) {
						this.newProvinceDataList[1].push(this.options[0].children[i]);
					}
					for (let i = 0; i < this.options[0].children[0].children.length; i++) {
						this.newProvinceDataList[2].push(this.options[0].children[0].children[i]);
					}

				} else {
					let p = value[0];
					let c = value[1]
					let a = value[2]
					let selectIndex = [];
					let tmpSelectP = "";
					let tmpSelectC = "";
					let tmpSelectA = "";
					this.newProvinceDataList[0] = [];
					this.newProvinceDataList[1] = [];
					this.newProvinceDataList[2] = [];
					for (let i = 0; i < this.options.length; i++) {
						this.newProvinceDataList[0].push(this.options[i]);
						if (this.options[i].code === p) {
							selectIndex.push(i);
							tmpSelectP = this.options[i].name;
							for (let j = 0; j < this.options[i].children.length; j++) {
								let city = this.options[i].children[j]
								this.newProvinceDataList[1].push(city);
								if (city.code === c) {
									tmpSelectC = city.name;
									selectIndex.push(j);
									for (let k = 0; k < city.children.length; k++) {
										let area = city.children[k];
										this.newProvinceDataList[2].push(area);
										if (area.code === a) {
											tmpSelectA = area.name;
											selectIndex.push(k);
										}
									}
								}
							}
						}
					}
					this.select = `${tmpSelectP}/${tmpSelectC}/${tmpSelectA}`
					this.multiIndex = [...selectIndex];
				}
			},
			// 省市区确认事件
			pickerChange(e) {
				this.multiIndex = e.detail.value;
				this.select =
					`${this.newProvinceDataList[0][this.multiIndex[0]].name}/${this.newProvinceDataList[1][this.multiIndex[1]].name}/${this.newProvinceDataList[2][this.multiIndex[2]].name}`
				let p = this.newProvinceDataList[0][this.multiIndex[0]];
				let c = this.newProvinceDataList[1][this.multiIndex[1]]
				let a = this.newProvinceDataList[2][this.multiIndex[2]];
				this.$emit("input",
					[p.code,
						c.code,
						a.code
					]);
				this.$emit("change",
					[{
							name: p.name,
							code: p.code
						},
						{
							name: c.name,
							code: c.code
						},
						{
							name: a.name,
							code: a.code
						}
					]);

			},
			pickerColumnchange(e) {
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					this.newProvinceDataList[1] = this.options[this.multiIndex[0]].children;
					if (this.options[this.multiIndex[0]].children.length === 1) {
						this.newProvinceDataList[2] = this.options[this.multiIndex[0]].children[0].children;
					} else {
						this.newProvinceDataList[2] = this.options[this.multiIndex[0]].children[this
							.multiIndex[
								1]].children
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					this.newProvinceDataList[2] = this.options[this.multiIndex[0]].children[this.multiIndex[
							1]]
						.children
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
				}
			}

		}
	}
</script>

<style>

</style>
